<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div class="brandox">
      <div class="brandhead">
        <img :src="dataList.list_pic_url" alt="" />
        <div class="brandhead-c">
            <span>{{dataList.name}}</span>
        </div>
      
      </div>
         <div class="banner">{{dataList.simple_desc}}</div>
      <div class="branditem">
          <div class="branditem-item" v-for="item in BrandList" :key="item.id">
            <img :src="item.list_pic_url" alt="">
            <p class="branditem-t">{{item.name}}</p>
            <p class="branditem-b">￥{{item.retail_price}}</p>
          </div>
      </div>
    </div>

  </div>
</template>
<script>
import { listaction, detailaction } from "@/api/home/brand.js";
export default {
  data() {
    return {
      id: 1001000,
      page: 1,
      // 获取是该ID的内容
      BrandList: [],
      //获取id表头内容
      dataList:[]
    };
  },
  methods: {
    getBrand() {
      listaction({
          page:this.page
      }).then(res=>{
          console.log(res)
          //获取的是全部信息
          this.BrandList=res.data;
      }),
      
      detailaction({
        id:localStorage.getItem('Id'),
      }).then((res) => {
        console.log(res);
        this.BrandList = res.goodsList;
        this.dataList=res.data;
        // console.log(this.BrandList)
      });
    },
    // getParams(){
    // var routerParams=this.$router.params.id;
    // console.log(routerParams)
    //   // this.id=routerParams
    //   // console.log(this.id)
    // },
    onClickLeft() {
      //返回上一个页面
      this.$router.go(-1);
    },
  },
  watch: {
    // "$router":'getBrand'
  },
  created() {
    this.getBrand();
  },
};
</script>
<style lang="scss" scoped>
    .brandox{
        margin-top: 48px;
        height:2700px;
        background-color: #f4f4f4;
       .brandhead{
           width: 100%;
           height: 145px;
           position: relative;
           img{
               width: 100%;
               height: 100%;
           }
           .brandhead-c{
               position: absolute;
               top: 50%;
                left: 50%;
                transform: translate3d(-50%,-50%,0);
                text-align: center;
            span{
                font-size: 16px;
                padding: 4px 3px;
                color: #fff;
                border-bottom:2px solid #fff ;
            }
           }
       } 
       .banner{
           background-color: #fff;
           padding:15px ;
           color: #666;
           font-size: 16px;
            text-align: center;
           }
       .branditem{
           margin-top: 10px;
        //    background-color: #fff;
           width: 100%;
           height:400px;
           display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
           .branditem-item{
               background-color: #fff;
               width:49%;
               height: auto;
               margin-bottom: 5px;
            //    background-color: rgb(231, 203, 203);
                img{
                    width: 90%;
                    height: auto;
                }
                .branditem-t{
                    margin: 10px 0;
                    text-align: center;
                    padding: 0 15px;
                }
                .branditem-b{
                    width: 100%;
                    text-align: center;
                }

           }
       }
    }
</style>